<template>
    <el-main>
        <Tabs>
            <el-tag :key="index" v-for="(tag, index) in tabs" 
                :closable="tabs.length>1" 
                :type="$route.path === tag.name ? 'success' : 'info'"
                hit
                :disable-transitions="false"
                @click.native="selectTab(tag, index)"
                @close="removeTab(tag, index)">
                {{tag.title}}
            </el-tag>
        </Tabs>
        <transition name="slide-fade">
            <router-view></router-view>
        </transition>
    </el-main>
</template>

<script lang="ts">
  import { Vue, Component, Watch, Emit, Prop, Provide, Model, Inject } from 'vue-property-decorator';
  import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
  import Tabs from '@component/common/Tabs.vue'

    @Component({
        components: {
            Tabs
        },
        computed: {
            ...mapState({
                "tabs": state => state.tabs
            })
        },
        methods: {
            ...mapMutations([
                "closeTab"
            ])
        }    
    })
    export default class Main extends Vue {
        data() {
            return {
                isEditing: false
            }
        }

        /**
         * 选中 Tab
         */
        selectTab(tag: any) {
            if (tag.name !== this.$route.path && this.isEditing) {
                this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '去保存',
                    cancelButtonText: '放弃'
                }).catch(action => {
                    if (action === 'cancel') {
                        this.$router.push({
                            path: tag.name
                        })
                    }
                })
            } else {
                this.$router.push({
                    path: tag.name
                })                
            }
        }

        /**
         * 关闭当前 tab
         */
        @Emit('closeTab')
        removeTab(targetName: any, index: number) {
            this.closeTab(targetName.name);

            if (this.$route.path === targetName.name) {
                let nextTab:number = (index) === this.tabs.length ? (index-1) : index 
                this.$router.push({
                    path: this.tabs[nextTab].name
                })
            }
        }

        // @Watch('$route')
        // onRouteUpdate (to: String, from: String) {
        //     console.log(to, from);
        // }

        // @Emit('beforeRouteUpdate')
        // beforeRouteUpdate (to: String, from: String) {
        //     console.log(to, from, 'beforeRouteUpdate');
        // }
    }
</script>

<style lang="scss" scoped>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .2s ease;
    }
    .slide-fade-leave-active {
        transition: all .2s ease-in-out;
    }
    .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
    .el-tag {
        cursor: pointer;
        margin-right: 10px;
        font-size: 12px;
        .el-tag--success .el-icon-close {
            color: $__color-remind!important;
        }        
    }
    .el-tag--success.is-hit {
        border-color: $__color-remind;
        background-color: #fff;
        color: $__color-show;
    }
    .el-tag--info.is-hit {
        border-color: $__color-border;
        background-color: #fff;
        color: $__color-show;
    }
</style>